<template>
    <div class="reminder-dialog check_member_box">
        <el-dialog title="速贴会员详情"
                   center
                   width="50%"
                   :visible.sync="visible"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   @closed="onCloseDialog">
            <el-form label-width="150px" class="fumin_detail member_check_box">
                <el-collapse v-model="activeNames">
                    <el-collapse-item name="1">
                        <template slot="title">
                            客户信息 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('1') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('1') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="公司名称：">
                                <span>{{memberDetail.enterpriseName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="机构类型：">
                                <span>{{memberDetail.orgNatureName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="贷款卡号/中征号：">
                                <span>{{memberDetail.loanCardNo}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="客户类型：">
                                <span>{{memberDetail.financeType1Name}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="企业类型：">
                                <span>{{memberDetail.orgTypeName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="企业所有制类型：">
                                <span>{{memberDetail.orgOwnerShipTypeName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="国际行业分类：">
                                <span>{{memberDetail.industryTypeName}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="注册资本（元）：">
                                <span>{{memberDetail.registerCapital}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="实收资本（元）：">
                                <span>{{memberDetail.paiclupCapital}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="职工人数（人）：">
                                <span>{{memberDetail.employeeNumber}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="年销售额（元）：">
                                <span>{{memberDetail.sellSum}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="资产总数（元）：">
                                <span>{{memberDetail.totalAssets}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="业务员联系电话：">
                                <span>{{memberDetail.mobile}}</span>
                            </el-form-item>
                        </el-col>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            企业信息 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('2') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('2') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-row>
                            <el-button type="text" class="register-btn-text">企业信息</el-button>
                        </el-row>
                        <el-row v-for="certIten in memberDetail.certArray">
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件类型：">
                                    <span>社会统一信用代码</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件编号：">
                                    <span>{{certIten.certId}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件签发城市：">
                                    <span>{{certIten.provinceName}}/{{certIten.municipalityName}}/{{certIten.cnIdRegCityName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件登记日期：">
                                    <span>{{certIten.regDate}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="是否长期有效：">
                                    <span>{{certIten.certDeadlineName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件到期日：">
                                    <span>{{certIten.idExpiry}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-button type="text" class="register-btn-text">联系地址信息</el-button>
                        </el-row>
                        <el-row v-for="addressIten in memberDetail.addrArray">
                            <el-col :span="8" class="text_left">
                                <el-form-item label="地址类型：">
                                    <span>注册地址</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="地址所属国家/地区：">
                                    <span>中华人民共和国</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="地址所属省/市：">
                                    <span>{{addressIten.provinceName}}/{{addressIten.municipalityName}}/{{addressIten.cityName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="邮政编码：">
                                    <span>{{addressIten.zipCode}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16" class="text_left">
                                <el-form-item label="地址详情：">
                                    <span>{{addressIten.address1}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-button type="text" class="register-btn-text">高管信息</el-button>
                        </el-row>
                        <el-row v-for="item in memberDetail.manageArray">
                            <el-col :span="8" class="text_left">
                                <el-form-item label="职务：">
                                    <span>{{item.manageRelationShipName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16" class="text_left">
                                <el-form-item label="姓名：">
                                    <span>{{item.customerName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件类型：">
                                    <span>{{item.certTypeName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件编号：">
                                    <span>{{item.certId}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件签发城市：">
                                    <span>{{item.provinceName}}/{{item.municipalityName}}/{{item.cnIdRegCityName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件登记日期：">
                                    <span>{{item.regDate}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="是否长期有效：">
                                    <span>{{item.certDeadlineName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件到期日：">
                                    <span>{{item.idExpiry}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-button type="text" class="register-btn-text">股东信息</el-button>
                        </el-row>
                        <el-row v-for="iten in memberDetail.stockHolderArray">
                            <el-col :span="8" class="text_left">
                                <el-form-item label="姓名：">
                                    <span>{{iten.customerName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="出资方式：">
                                    <span>{{iten.relationShipName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="出资比例(%)：">
                                    <span>{{iten.investmentProp}}</span>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件类型：">
                                    <span>{{iten.certTypeName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件编号：">
                                    <span>{{iten.certId}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件签发城市：">
                                    <span>{{iten.provinceName}}/{{iten.municipalityName}}/{{iten.cnIdRegCityName}}</span>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件登记日期：">
                                    <span>{{iten.regDate}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="是否长期有效：">
                                    <span>{{iten.certDeadlineName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="text_left">
                                <el-form-item label="证件到期日：">
                                    <span>{{iten.idExpiry}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                        <template slot="title">
                            图片信息 <el-button size="small" type="primary" class="up_down_text">{{activeNames.indexOf('3') > -1 ? '收起' : '展开'}}<i :class="[activeNames.indexOf('3') > -1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                        </template>
                        <el-row>
                            <el-button type="text" class="register-btn-text">客户证件图片信息</el-button>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <img class="licence_image" :src="memberDetail.fileUrl1" alt="">
                            </el-col>
                            <el-col :span="8">
                                <img class="licence_image" :src="memberDetail.fileUrl2" alt="">
                            </el-col>
                            <el-col :span="8">
                                <img class="licence_image" :src="memberDetail.fileUrl3" alt="">
                            </el-col>
                        </el-row>
                        <hr>
                        <el-row style="display: flex;justify-content: center;">
                            <el-button type="text" class="register-btn-text">上一年财务报表</el-button>
                        </el-row>
                        <el-row>
                            <el-col :span="12" style="text-align: center;">
                                <img class="licence_image" :src="memberDetail.finance1" alt="">
                            </el-col>
                            <el-col :span="12" style="text-align: center;">
                                <img class="licence_image" :src="memberDetail.finance2" alt="">
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
            <span slot="footer" class="dialog-footer submit-btn">
            <el-button size="small" type="info" @click="visible = false">关闭</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
    var memberStore = namespace('member')
    
    @Component
    export default class FuMinDetail extends Vue {
        // ------------------- data -------------------
        activeNames = [ "1", "2", "3" ]
        @memberStore.State('fuMinMemberDetail') memberDetail!:any
        visible = false
        memberState = 1
        // ------------------- methods -------------------
        indexMethod(index:number) {
            return index
        }

        isOperator(row:object, column:string, cellValue:number, index:number) {
            return cellValue == 0 ? '操作员' : '管理员'
        }

        onCloseDialog() {
            this.visible = false;
        }

        open () {
            this.visible = true;
        }

        close () {
            this.visible = false;
        }

        // ------------------- lifecycle -------------------
        mounted() {

        }

    }
</script>

<style lang="scss">
    .licence_image {
        width:240px;
        height:332px;
    }
    .fumin_detail {
        .el-form-item {
            margin-bottom: 0;
        }
        .el-collapse-item__header {
            font-size: $__big-font-size;
        }
        .register-btn-text {
            color: $__color-show;
            font-size: $__font-size-default;
        }
    }
</style>
